/*
* @Author: Yejing
* @Date: 2023-06-10 10:31:18
* @LastEditors: Yejing
* @LastEditTime: 2023-06-10 10:31:18
* @Description: desc
*/
<template>
	<view class="modify-page">
		<!-- 头部 -->
		<c-layout>
			<c-navigation-bar :title="$t('storeManagement.storeFile')" :navType='search.navType' :bottomBorder='false'
				:navPlaceholder='search.navPlaceholder' :navThmen='search.navThmen'>
			</c-navigation-bar>
			<u-tabs ref="tabs" :list="list" :is-scroll="false" active-color="#2979ff" inactive-color="#C1C0C8"
				font-size="30" :current="current" @change="change" swiperWidth="750"></u-tabs>
			<!-- 修改 -->
			<view class="container-box form-modify">
				<scroll-view :scroll-y='allPage>1' class="contractBox" @scroll="onScroll" v-if="current==0">
					<u-parse :html="content" class='contractUparse'></u-parse>

				</scroll-view>
				<view class="contractBoxPaging" v-if="current==0">
					<view class="paging">
						{{nowPage}}/{{allPage}}
					</view>
				</view>
				<certificateContract :title="$t('Contract.title')" sort="BIG SHOP" :num="shopId" where="BIG SHOP"
					:name="user.nickName" :sign="sign" :time="time" :bianhao="123456789123456789" v-if="current==1">
				</certificateContract>
			</view>

		</c-layout>



	</view>
</template>

<script>
	import certificateContract from '@/components/CertificateContract/CertificateContract.vue'
	export default {
		components: {
			certificateContract,
		},
		data() {
			return {
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
				},
				list: [{
					name: this.$t('storeManagement.MyContract')
				}, {
					name: this.$t('storeManagement.MyCertificate')
				}, ],
				current: 0,
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				content: ``,
				content1: '',
				shopId: '',
				nowPage: 1,
				allPage: 0,
				imgsrc: '',
				viewHeight: 0,
				time: new Date().toLocaleDateString(),
				user: {},
				sign: ''
			}
		},
		onLoad() {
			this.user = this.$store.state.vuex_user_info

		},
		methods: {

			onScroll(e) {
				console.log(e.detail)
				this.nowPage = Math.ceil(e.detail.scrollTop / this.viewHeight) + 1
			},
			change(index) {
				this.current = index;
			}

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// 计算scroll-view高度

			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery()
					query.select('.contractBox').boundingClientRect()
					query.exec(res => {
						this.viewHeight = res[0].height
					})
				}
			})
			this.$u.get('/app/shop').then(res => {
				const moment = require('moment');
				
				this.shopId = res.data.id
				// new Date(res.data.createTime).toLocaleDateString('en-US')
				 
				this.time = moment(res.data.createTime).format('DD-MM-YYYY')
				this.$u.get('/app/shop/shopContract/' + this.shopId).then(r => {
					this.content = r.data.shopContract
					this.sign = r.data.sign
					console.log(this.time)
					this.content = this.content.replace(/img src="signImg"/g,
						'img src="signImg" style="width:100px;height:75px;display:none"')
					this.$nextTick(() => {
						uni.getSystemInfo({
							success: ru => {
								const query = uni.createSelectorQuery()
								query.select('.contractUparse').boundingClientRect()
								query.exec(i => {
									console.log(i[0])
									this.allPage = Math.ceil(
										i[0].height / this.viewHeight)
								})
							}
						})
					})
				})
			
			})
		},
	}
</script>

<style lang="scss" scoped>
	.modify-page {
		height: 100vh;

		.container-box {
			height: 80vh;
			overflow: auto;
			padding: 30rpx;

			.contractBox {
				height: 75%;
				background: #fff;
				overflow: auto;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;

			}

		}

		.contractBoxPaging {
			border-bottom-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
			background: #fff;
			height: 80rpx;
			margin-bottom: 10rpx;
			position: relative;

			.paging {
				width: 80rpx;
				height: 21px;
				text-align: center;
				background: #E8E8E9;
				border-radius: 11px 11px 11px 11px;
				color: #000;
				position: absolute;
				right: 40rpx;
				top: 18rpx;
				font-size: 12px;
				line-height: 21px;
			}
		}

		.bootom {
			position: absolute;
			bottom: 60rpx;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);

			.u-btn {
				padding: 30rpx;
			}
		}

		.p-b-6 {
			padding-bottom: 60rpx;
			width: 100%;
			margin-top: 48rpx;
			display: inline-block;
		}

		.uploaddiv {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 30rpx;
			border-radius: 20rpx;
			opacity: 1;
			border: 1px solid #E8E6EA;
			height: 296rpx;
		}
	}

	/deep/ .sign-img {
		height: 220rpx;
	}
</style>